<template>
  <div>
    <el-button
      icon="el-icon-plus"
      size="small"
      type="primary"
      @click="handleAdd"
      >新增角色</el-button
    >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="角色编号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180">
      </el-table-column>
      <el-table-column prop="jurisdictionName" label="权限" width="180">
      </el-table-column>
      <el-table-column prop="createdTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="是否冻结" width="120">
        <!-- 开关按钮 -->
        <template v-slot="scope">
          <el-switch
            class="switchStyle1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="scope.row.isActived"
            @change="ChangeFreeze(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹窗 -->
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="formData.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限介绍" :label-width="formLabelWidth">
          <el-select
            v-model="formData.jurisdictionName"
            placeholder="请选择权限"
            style="width: 100%"
            @change="changePermission"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.jurisdictionName"
              :value="item.jurisdictionName"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getRole, addRole, getPermission, delRole } from '../../api/role'
import formatTime from '../../utils/formatTime'
export default {
  data () {
    return {
      tableData: [],
      // isActive: false,
      // isDeleted: false,
      dialogFormVisible: false,
      formData: {
        id: 0,
        roleName: '',
        jurisdictionName: ''
      },
      options: [],
      formLabelWidth: '120px',
      pager: {
        pageIndex: 1,
        pageSize: 10,
        rowsTotal: 30

      }
    }
  },
  mounted () {
    // this.tableData.push({
    //   isActived: false
    // })
    this.fetchData(this.pager)

    // 获取所有权限
    getPermission().then((res) => {
      res.data.data.forEach((item) => {
        this.options.push({
          id: item.id,
          jurisdictionName: item.jurisdictionName
        })
      })
      // console.log(res)
    })
  },
  methods: {
    // 是否冻结开关
    ChangeFreeze (row) {
      console.log(row)

      delRole(row.id, {
        isActived: row.isActived,
        isDeleted: false
      })
        .then(({ data }) => {
          if (data.code === 200) {
            if (data.data.isActived) {
              this.$message({
                type: 'info',
                message: '启用成功！'
              })
            } else {
              this.$message({
                type: 'success',
                message: '冻结成功!'
              })
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 删除
    handleDelete (index, row) {
      this.currentIndex = index
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(row)
          delRole(row.id, {
            isActived: row.isActived,
            isDeleted: true
          }).then(({ data }) => {
            this.isDeleted = true
            this.isDeleted = data.data.isDeleted
            // console.log(data.data.data.data)
          })
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 新增
    handleAdd () {
      this.dialogFormVisible = true
      this.formData.roleName = ''
      this.formData.jurisdictionName = ''
    },
    // 新增取消
    handleCancel () {
      this.dialogFormVisible = false
    },
    // 新增确定
    async handleSave () {
      this.dialogFormVisible = false
      console.log(this.formData)
      // 如果表单中的Id为0，则认为是添加用户
      if (this.formData.id === 0) {
        const { data } = await addRole(this.formData)
        console.log(data)
        if (data.code === 200) {
          const value = data.data.roles
          value.createdTime = formatTime(value.createdTime)
          value.jurisdictionName = data.data.jurisdictionName
          this.tableData.push(value)
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.msg)
        }
      }
    },

    // 获取后台选择权限
    async changePermission (id) {
      // const { data: res } = await getPermission(id)
      // console.log(res)
      // if (res.meta.status !== 200) {
      //   return this.$message.error('获取权限列表失败')
      // }
      // this.options = res.data
    },

    // 根据分页获取后台数据
    async fetchData (pager) {
      const { data } = await getRole(pager)

      data.data.data.forEach((item) => {
        item.createdTime = formatTime(item.createdTime)
      })

      // console.log(data)
      this.tableData = data.data.data
      this.pager = data.data.pager
    },

    // 分页页面大小
    handlePageSizeChange (val) {
      this.pager.pageSize = val > 0 ? val : 1
      this.fetchData(this.pager)
    },

    // 分页页码
    handlePageIndexChange (val) {
      this.pager.pageIndex = val
      this.fetchData(this.pager)
    }
  }
}
</script>

<style>
</style>
